import { useState } from "react";
import { styled } from "styled-components";
import { SlideInOverlay } from "./SlideInOverlay";


export function StyledComponentsTest10() {
    const [count, setCount] = useState(0);
    const [show, setShow] = useState(false);
    return <>
        <button
            onClick={() => {
                setShow(true);
            }}
        >
            开启
        </button>
        <SlideInOverlay
            isVisible={show}
            from="right"
            className={"guangguang"}
            style={{
                border: "2px solid #000",
            }}
            onEnter={() => {
                alert('entered')
            }}
            onExit={() => {
                alert('exited')
            }}
        >
            <button
                onClick={() => {
                    setShow(false);
                }}
            >
                关闭
            </button>
        </SlideInOverlay>
    </>
}